<template>
    <div class="box">
        
        <el-card class="box-card">
          <div slot="header" class="">
            <span>{{addOrEdit}}</span>
            
          </div>
                <el-form ref="form" :inline="true" :rules="rules" :model="form" label-width="120px">
                    <el-row >
                        <el-col :span="10">
                          <el-form-item prop="imageUrl">
                            <el-upload 
                                action="http://localhost:8888/common/upload" 
                                accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG"
                                :show-file-list="false" 
                                
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeLicenseUpload" 
                                >
                                <!-- :on-change="handleLicensePreview" -->
                                <img v-if="form.imageUrl"  :src="form.imageUrl" class="avatar" width="170px">
                                <i v-else class="el-icon-circle-plus avatar-uploader-icon" style="font-size:30px;"></i>
                            </el-upload>      
                          </el-form-item>
                             
                        </el-col>
                        <el-col :span="14">
                            <el-form-item label="房间型号：" prop="roomType">
                                <el-select v-model="form.roomType" placeholder="请选择房间型号">
                                  <el-option label="小房" value="小房"></el-option>
                                  <el-option label="中房" value="中房"></el-option>
                                  <el-option label="大房" value="大房"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="床的数量：" prop="bedsNumber">
                                <el-select v-model="form.bedsNumber" placeholder="请选择床位数">
                                  <el-option v-for="(item,index) in bedNumberList" :key="index" :label="item.label" :value="item.label"></el-option>
                                 
                                </el-select>
                            </el-form-item>
                            <el-form-item label="价格：" prop="prices">
                                <el-input v-model="form.prices" placeholder="输入价格"></el-input>
                            </el-form-item>
                            <el-form-item label="房间位置" prop="count">
                                <el-input v-model="form.address" placeholder="房间位置"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item style="margin-right: 120px;">
                      <el-button type="primary" round @click="submitForm(form)">{{submitAddOrEdit}}</el-button>
                    </el-form-item>
                </el-form>
                

        </el-card>
    </div>


</template>

<script>
import { setRoom, updateRoom } from '@/api/room'
import Cookie from 'js-cookie';
import common from '@/assets/common';
export default {
    name: 'Add',
    components: {},
    data() {
        return {
          form: {
            imageUrl: '',
            roomType:'',
            bedsNumber:'',
            prices:'',
            address:'',
          },
          addOrEdit:'添加',
          submitAddOrEdit:'点击添加'
        }
    },
    computed:{
      rules(){
        return{
          imageUrl:[
            {required:true,message:'请选择图片',trigger:'blur'}
          ],
          roomType:[
          {'required': true, 'message': '请选择房间类型', 'trigger': 'blur'}
          ],
          bedsNumber:[
          {'required': true, 'message': '请选择床位数', 'trigger': 'blur'}
          ],
          prices:[
          {'required': true, 'message': '填写价格', 'trigger': 'blur'}
          ],
          address:[
          {'required': true, 'message': '房间位置', 'trigger': 'blur'}
          ],
        }
      },
      bedNumberList(){
        return [{value:'1',label:'单人床'},{value:'2',label:'两张单人床'},{value:'4',label:'两张双人床'},]
      }
    },
    methods: {
      
        handleAvatarSuccess (response, file, fileList) {
          // console.log('response',response);
              this.form.imageUrl = `http://localhost:8888/common/download?name=${response.data}`
          },

        //图片上传限制               
        beforeLicenseUpload(file) {
          // console.log(file);
          if(file){
              const suffix = file.name.split('.')[1]
              const size = file.size / 1024 / 1024 < 2
              if(['png','jpeg','jpg'].indexOf(suffix) < 0){
                this.$message.error('上传图片只支持 png、jpeg、jpg 格式！')
                this.$refs.upload.clearFiles()
                return false
              }
              if(!size){
                this.$message.error('上传文件大小不能超过 2MB!')
                return false
              }
              return file
            }
        },
        submitForm(val){      
          this.$refs.form.validate(valid=>{
            if(valid){
              if(Cookie.get('modalType') ==0){
                this.form.bedsNumber = common.newArr(this.bedNumberList).indexOf(this.form.bedsNumber)
                setRoom(this.form).then(res=>{
                  // console.log('添加或修改的数据-------',res);
                  let {data,msg,code} = res.data
                  if(code === 1){
                    this.$message.success(data)
                    this.goBack()
                  }else{
                    this.$message.error(msg)
                  }
                  
                }).catch(err => {
                  this.$message.error('后端连接失败'+err)
                })
              }else{
                this.form.bedsNumber = common.newArr(this.bedNumberList).indexOf(this.form.bedsNumber)
                updateRoom(this.form).then(res=>{
                  // console.log('很要命--修改-----',res);
                  let {data,code,msg} = res.data
                  if(code ===1){
                    this.$message.success(data)
                  }else{
                    this.$message.error(msg)
                  }
                  this.goBack()
                }).catch(err =>{
                  this.$message.error('后端出现异常',err)
                })
              }
            }
          })
        },
        goBack(){
            this.$router.push({name:'AdminRoom'})
        }
    },
    mounted(){
      if(Cookie.get('modalType') == 1){
        this.form = JSON.parse(Cookie.get('row'))
        this.addOrEdit = '编辑'
        this.submitAddOrEdit = '确定修改'
        this.form.bedsNumber = common.newArr(this.bedNumberList)[this.form.bedsNumber]
      }
    }
}
</script>

<style lang="less" scoped>
  .box{
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content:center;
    align-items:center;
    .box-card {
        width: 800px;
        margin-top: -89px;

        .el-icon-upload{
            width: 20px;
            height: 12px;
        }
        .el-row {
            margin-bottom: 20px;
            &:last-child {
              margin-bottom: 0;
            }
            .el-input{
              width: 217px;
            }
          }

        
       
        
    
    }
  }
  
  
  
</style>